<script setup lang="ts">
    import { Session } from '@/utils/storage';
    import request from "@/utils/request";
    import { uploadImg } from '@/api/common/media';
    import base from "@/utils/base";
    import { defineAsyncComponent,reactive,ref,toRefs,nextTick } from 'vue';
    import {notify,confirm} from '@/utils/element';
                    const state=reactive({
                                                                                                                                            xingbieOptions:[],
                                                                                
        ruleForm: {

        },
        formInline: {},
        dataList: [],

        user:{},
                        
        
    })


    const {dataList,ordersList,ruleForm,
                                                                                                                                                    xingbieOptions,
                                                                                
                formInline,
        
        

    } = {...toRefs(state)};




    init();

        
        
        
    function init(){
        let sessionTable = Session.get("tableName")
        request({
            url:  '/yonghu/session',
            method: "get"
        }).then((
                data
        ) => {
            if (data && data.code === 0) {

            state.user = data.data;
            state.ruleForm=data.data;

        } else {
            notify(data.msg,{type:'error'});
        }
    });
    }



        
    const formRef=ref();
    // 提交
    function onSubmit() {
        let sessionTable = Session.get("tableName")
        formRef.value?.validate((valid)=>{

            if(!valid) return;

        request({
            url:`yonghu/${!state.ruleForm.id ? "save" : "update"}`,
            method:'post',
            data:state.ruleForm
        }).then((data)=>{
            notify("操作成功",{type:'success'});

        emit("refresh");
    })
    })

    }
        

        

        
                    
                    
                    
                    
                    
                                                    state.xingbieOptions= "男,女".split(',')
                            
                    
                    
                    
        



</script>



<template>
    <div style="line-height: 50px;">
        <el-card class="box-card">
            <div slot="header" class="clearfix" style="text-align: center;">
                <span>个人中心</span>
            </div>

        </el-card>
        <div style="height: 50px;"></div>

        <el-tabs tab-position="left" style="height: 800px;">
    
            

            
            


            

            



            <el-tab-pane label="修改个人信息">



                <div class="addEdit-block">
                    <el-form
                            ref="formRef" :model="ruleForm"
                            label-width="85px" label-right="right"
                            label-suffix=":" status-icon
                    >
                        <el-row>




                                                                                                                                                                                    


                                    <el-col :span="24">
                                        <el-form-item class="input" label="账号" prop="zhanghao"  :rules="{required: true, message: '账号为必填项！', trigger: 'blur'}" >
                                            <el-input v-model="ruleForm.zhanghao"
                                                      placeholder="账号" clearable></el-input>
                                        </el-form-item>
                                    </el-col>
                                                                                            


                                    <el-col :span="24">
                                        <el-form-item class="input" label="密码" prop="mima"  :rules="{required: true, message: '密码为必填项！', trigger: 'blur'}" >
                                            <el-input type="password" v-model="ruleForm.mima" placeholder="密码" clearable></el-input>
                                            <!-- <input type="password"  placeholder="密码" v-model="ruleForm.password" autocomplete="off"> -->
                                        </el-form-item>
                                    </el-col>
                                                                                            


                                    <el-col :span="24">
                                        <el-form-item class="input" label="年龄" prop="nianling"  :rules="{required: true, message: '年龄为必填项！', trigger: 'blur'}" >
                                            <el-input v-model="ruleForm.nianling"
                                                      placeholder="年龄" clearable></el-input>
                                        </el-form-item>
                                    </el-col>
                                                                                                                                <el-col :span="24">
                                        <el-form-item class="input" label="性别" prop="xingbie"  :rules="{required: true, message: '性别为必填项！', trigger: 'blur'}" >
                                            <el-select v-model="ruleForm.xingbie" placeholder="请选择性别">

                                                <el-option
                                                        v-for="(item,index) in xingbieOptions"
                                                        v-bind:key="index"
                                                        :label="item"
                                                        :value="item">
                                                </el-option>
                                            </el-select>
                                        </el-form-item>
                                    </el-col>

                                                                                            


                                    <el-col :span="24">
                                        <el-form-item class="input" label="联系方式" prop="lianxifangshi"  :rules="{required: true, message: '联系方式为必填项！', trigger: 'blur'}" >
                                            <el-input v-model="ruleForm.lianxifangshi"
                                                      placeholder="联系方式" clearable></el-input>
                                        </el-form-item>
                                    </el-col>
                                                                                            


                                    <el-col :span="24">
                                        <el-form-item class="input" label="收货地址" prop="shouhuodizhi"  :rules="{required: true, message: '收货地址为必填项！', trigger: 'blur'}" >
                                            <el-input v-model="ruleForm.shouhuodizhi"
                                                      placeholder="收货地址" clearable></el-input>
                                        </el-form-item>
                                    </el-col>
                                                                                            


                                    <el-col :span="24">
                                        <el-form-item class="input" label="名字" prop="mingzi"  :rules="{required: true, message: '名字为必填项！', trigger: 'blur'}" >
                                            <el-input v-model="ruleForm.mingzi"
                                                      placeholder="名字" clearable></el-input>
                                        </el-form-item>
                                    </el-col>
                                                            

















                        </el-row>
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit">提交</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-tab-pane>


        </el-tabs>


    </div>
        
</template>
<style lang="scss" scoped>
    .avatar-uploader{
        border:1px solid #e4e6e9
    }

    .avatar-uploader .el-upload {
        border: 1px dashed var(--el-border-color);
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        transition: var(--el-transition-duration-fast);
    }

    .avatar-uploader .el-upload:hover {
        border-color: var(--el-color-primary);
    }

    .el-icon.avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        text-align: center;
    }
</style>
